<!doctype html>
<html lang="en" >
<head >
  <meta charset="utf-8">
  <title>My HTML File</title>
   <link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet" type="text/css">
   <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
    <script src="test.js"></script>
   <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
</head>
<body ng-app="PubNubChat">
  

<div pub-key="pub-89e65919-75bd-436e-8a91-a35f79cda319" sub-key="sub-c7c63d3a-37eb-11e2-88c9-c7df1d04ae4a" ssl="off" origin="pubsub.pubnub.com" id="pubnub"></div>
<script src="http://cdn.pubnub.com/pubnub-3.1.min.js"></script>
<div ng-controller="MyCtrl">
<div class="progress progress-danger progress-striped" id="progress_bar">
        <div class="bar" style="width: 100%;">
        </div>
    </div>
    <div id = "login">
    	    <input placeholder="What is your name?" type="text" name="username" ng-model="message.username"/>
            <div class="clearfix"></div>
            <input placeholder="Choose a channel" type="text" name="channel" ng-model="channel"/>
            <div class="clearfix"></div>
            <button type="submit" ng-click="subscribe()" class="btn btn-danger">
                Login
            </button>
    </div>
    <div id="chat">
        <br/>
        <b>Status: {{realtimeStatus}} </b>
        <form class="form-horizontal">
            <input placeholder="What's on your mind?" type="text" name="text" ng-model="message.text"/>
            <button type="submit" ng-click="publish()" class="btn btn-danger">
                Send
            </button>
        </form>
        <hr/><!-- Message List -->
        <div id="messages" class="table-striped">
            <div class="message" ng-repeat="message in messages" cool-fade>
                <p class="user">
                    {{message.username}} said: {{message.text}}
                </p>
            </div>
        </div>​

</body>
</html>